如果想重複使用同一筆資料以增加靈活性，我們可能需要在component之間傳遞參數，這時候就
可以使用React的props。

React 中的 "props" 是指 "properties" 的縮寫，用於傳遞給 React 元件的參數。每個 React 元件都可以接受一些屬性（props），這些屬性可以是任何類型的資料，例如字串、數字、物件等。這些屬性允許你在父元件中傳遞資料給子元件。

例如這些blogs資料被宣告在Home.js的檔案裡，

const [blogs, setBlogs] = useState([
    { title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 },
    { title: 'Welcome party!', body: 'lorem ipsum...', author: 'yoshi', id: 2 },
    { title: 'Web dev top tips', body: 'lorem ipsum...', author: 'mario', id: 3 }
  ])

在這裡整串blogs資料被宣告成props，

<BlogList blogs={blogs} title="All Blogs" />

props能以參數的形式傳入BlogList Component，所以即使宣告在Home.js檔案裡

const BlogList = (props) => {
   const blogs = props.blogs;
   const title = props.title;
   console.log(blogs);

也能繼續在BlogList Component使用裡面的元素。

  return (
    <div className="blog-list">
      <h2>{ title }</h2>
      {blogs.map(blog => (
        <div className="blog-preview" key={blog.id} >
          <h2>{ blog.title }</h2>
          <p>Written by { blog.author }</p>
        </div>
      ))}
    </div>
  );
}
 
export default BlogList;

參考資料

Net ninja